<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>

    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
    <% } %>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <script>
      function verticalCenter () {
        let bodyW = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth
        let bodyH = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight
        let newBodyW = bodyH / 1080 * 1920
        if (document.querySelector('body')) {
          document.querySelector('body').style.width= newBodyW + 'px'
        }
      }
      function getRem(pwidth){
          let oWidth = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth
          let html = document.getElementsByTagName("html")[0];
          let fontSize = ((oWidth/pwidth))
          html.style.fontSize = fontSize + "px";
          window.fontSize = fontSize
      }
      /*1920代表设计师给的设计稿的宽度，你的设计稿是多少，就/100;比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
      getRem(19.2)
      verticalCenter();
      window.onresize = function(){
        getRem(19.2)
        verticalCenter();
      }
    </script>
  </body>
</html>
